<template>
  <div class="child1">Child1:{{ count }}</div>
</template>
<script>
import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  onActivated,
  onDeactivated
} from "vue";
export default {
  props: ["count"],
  setup() {
    console.log(`  Vue3 Child1 setup`);
    onBeforeMount(() => {
      console.log(`  Vue3 Child1 onBeforeMount`);
    });
    onMounted(() => {
      console.log(`  Vue3 Child1 onMounted`);
    });
    onBeforeUpdate(() => {
      console.log(`  Vue3 Child1 onBeforeUpdate`);
    });
    onUpdated(() => {
      console.log(`  Vue3 Child1 onUpdated`);
    });
    onBeforeUnmount(() => {
      console.log(`  Vue3 Child1 onBeforeUnmount`);
    });
    onUnmounted(() => {
      console.log(`  Vue3 Child1 onUnmounted`);
    });
    onActivated(()=>{
      console.log(`  Vue3 Child1 onActivated`);
    });
    onDeactivated(()=>{
      console.log(`  Vue3 Child1 onDeactivated`);
    });
  },
  beforeCreate() {
    console.log(`  Vue2 Child1 beforeCreate`);
  },
  created() {
    console.log(`  Vue2 Child1 created`);
  },
  beforeMount() {
    console.log(`  Vue2 Child1 beforeMount`);
  },
  mounted() {
    console.log(`  Vue2 Child1 mounted`);
  },
  beforeUpdate() {
    console.log(`  Vue2 Child1 beforeUpdate`);
  },
  updated() {
    console.log(`  Vue2 Child1 updated`);
  },
  beforeDestroy() {
    console.log(`  Vue2 Child1 beforeDestroy`);
  },
  destroyed() {
    console.log(`  Vue2 Child1 destroyed`);
  },
};
</script>
<style>
.child1 {
  border: 5px solid green;
}
</style>
